<!DOCTYPE html>
<html class="x-admin-sm">
{include file='public/header'}
<script src="/admin/xadmin/lib/layui/upload.js" charset="utf-8"></script>

<body>
    <div class="x-body">
        <form class="layui-form" lay-filter="formAjax">
            <div class="layui-form-item">
                <label class="layui-form-label">
                    <span class="x-red">*</span>用户名
                </label>
                <div class="layui-input-block">
                    <input type="text" name="name" id="name" placeholder="用户名" required="required"
                        lay-verify="required" autocomplete="off" class="layui-input" value="" />
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">
                    <span class="x-red">*</span>昵称
                </label>
                <div class="layui-input-block">
                    <input type="text" name="nickname" id="nickname" placeholder="昵称" required="required"
                           lay-verify="required" autocomplete="off" class="layui-input" value="" />

                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">
                    <span class="x-red">*</span>角色
                </label>
                <div id="pMenu" style="width:100%;flex:1"></div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">
                    <span class="x-red">*</span>头像
                </label>
                <button type="button" class="layui-btn" id="text1">上传</button>
                <div class="layui-upload-list" style="display: none;margin-left: 110px;">
                    <img class="layui-upload-img" id="demo1" style="width: 100px;">
                    <p id="demoText"></p>
                </div>
                <input type="hidden" name="profile_photo" id="profile_photo" value="" />
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">
                    <span class="x-red">*</span>密码
                </label>
                <div class="layui-input-block">
                    <input type="password" name="password" id="password" placeholder="密码" required="required"
                        lay-verify="required" autocomplete="off" class="layui-input" value="" />
                    <div class="layui-form-mid layui-word-aux layui-font-red">请慎重修改！！！</div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">
                    <span class="x-red">*</span>介绍
                </label>
                <div class="layui-input-block">
                    <textarea name="introduce" id="introduce" placeholder="介绍" required="required"
                        lay-verify="required" autocomplete="off" class="layui-textarea" value="" ></textarea>
                </div>
            </div>     

            <input type="hidden" name="id" id="id" value="" />
            <button id="submitData" class="layui-btn" lay-submit lay-filter="submitData" style="display: none;" />
        </form>
    </div>
    <script>
        let params = {
            addUrl: '/admin/admin/add',
            editUrl: '/admin/admin/edit',
            detailUrl: '/admin/admin/detail',
        }
        form_ajax(params)
        let id = GetQueryString('id')
        let selectParams = {
            url: '/admin/rule/select',
            selected: [],
            tips: '选择角色',
            name: 'rule_id',
            field_id: 'id',
            field_Name: 'name',
            elem: '#pMenu'
        }

        if (id) {
            Ajax(params.detailUrl, { id }).then(result => {
                selectParams.selected = result.data.rule_id.toString()
                selectN(selectParams)
                if(result.data.profile_photo){
                    $('.layui-upload-list').show()
                    $('.layui-upload-img').attr('src', result.data.profile_photo);
                    $("input[name='profile_photo']").val(result.data.profile_photo);
                }
            });
        } else {
            selectN(selectParams)
        }
        layui.use(function(){
            var upload = layui.upload;
            var element = layui.element;
            var $ = layui.$;
            // 制作多文件上传表格
            //常规使用 - 普通图片上传
            var uploadInst = upload.render({
                elem: '#text1'
                ,url: '/admin/Admin/upload' //此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
                ,before: function(obj){
                    //预读本地文件示例，不支持ie8
                    obj.preview(function(index, file, result){
                        // $('#demo1').attr('src', result); //图片链接（base64）
                    });

                    element.progress('demo', '0%'); //进度条复位
                    layer.msg('上传中', {icon: 16, time: 0});
                }
                ,done: function(res){
                    //如果上传失败
                    if(res.code == 0){
                        return layer.msg('上传失败');
                    }
                    //上传成功的一些操作
                    $('.layui-upload-list').show();
                    $('input[name=profile_photo]').val(res.message);
                    let host = window.location.host;
                    let url = 'http://'+ host + res.message
                    $('.layui-upload-img').attr('src', url);
                    //……
                }
                ,error: function(){
                    //演示失败状态，并实现重传
                    var demoText = $('#demoText');
                    demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                    demoText.find('.demo-reload').on('click', function(){
                        uploadInst.upload();
                    });
                }
                //进度条
                ,progress: function(n, elem, e){
                    element.progress('demo', n + '%'); //可配合 layui 进度条元素使用
                    if(n == 100){
                        layer.msg('上传完毕', {icon: 1});
                    }
                }
            });
        });
    </script>
</body>

</html>